<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:400px;height: 300px;border: solid 1px black;margin: 0 auto;}
    .box .btns{height: 30px;line-height: 30px;background: #ccc;display: flex;}
    .box .btns span{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;text-align: center;cursor: pointer;}
    .box .btns span.active{color: #fff;background: red;}
    .box .cont{width: 400px;height: 270px;display: none;}
    .box .cont1{background-color: pink;}
    .box .cont2{background-color: green;}
    .box .cont3{background-color: blue;}
    .box .cont4{background-color: yellow;}
  </style>
</head>
<body>
  <div class="box table1">
    <div class="btns">
      <span>电子</span>
      <span>户外</span>
      <span>零食</span>
      <span>衣服</span>
    </div>
    <div class="contBox">
      <div class="cont1 cont">这是电子选项</div>
      <div class="cont2 cont">这是户外选项</div>
      <div class="cont3 cont">这是零食选项</div>
      <div class="cont4 cont">这是衣服选项</div>
    </div>
  </div>
</body>
<script>

  // 分析：选项卡，点击按钮切换内容
  // 1. 获取元素
  // 2. 给按钮绑定索引
  // 3. 绑定点击事件
    // 4. 获取点击按钮的索引
    // 5. 根据索引显示对应内容

  // 设计：
  // class table{
  //   constructor(ops){
  //     // 1. 获取元素
  //     // ...
  //     // 2. 执行给按钮绑定索引的功能
  //     this.addIndex();
  //     // 3. 执行给按钮绑定事件的功能
  //     this.addEvent();
  //   }
  //   addIndex(){
  //     // 给按钮绑定索引
  //   }
  //   addEvent(){
  //     // 给按钮绑定事件
  //       // 4. 执行获取当前按钮的索引的功能
  //       const index = this.getNowIndex();
  //       // 5. 执行根据索引显示对应内容的功能
  //       this.display(index);
  //   }
  //   getNowIndex(){
  //     // 获取当前按钮的索引
  //     // return 索引
  //   }
  //   display(index){
  //     // 根据索引显示对应内容
  //   }
  // }
  // new table({
  //   ele: box1,
  //   index: 0
  // })

  // 编程
  class table{
    constructor({ele, index=0}){
      // 1. 获取元素
      this.btns = ele.querySelectorAll(".btns span");
      this.conts = ele.querySelectorAll(".contBox .cont");
      this.index = index;

      // 1.5 根据默认索引，设置默认项
      this.init();

      // 2. 执行给按钮绑定索引的功能
      this.addIndex();
      // 3. 执行给按钮绑定事件的功能
      this.addEvent();
    }
    addIndex(){
      // 给按钮绑定索引
      for(let i=0;i<this.btns.length;i++){
        this.btns[i].index = i;
      }
    }
    addEvent(){
      const that = this;
      // 给按钮绑定事件
      for(let i=0;i<this.btns.length;i++){
        this.btns[i].onclick = function(){
          // console.log(this.index, that.index);
          // 4. 执行获取当前按钮的索引的功能
          const index = that.getNowIndex(this);
          // 5. 执行根据索引显示对应内容的功能
          that.display(index);
        }
      }
    }
    getNowIndex(now){
      // 获取当前按钮的索引
      return now.index;
    }
    display(index){
      // 清除默认索引对应的样式和内容
      this.btns[this.index].className = "";
      this.conts[this.index].style.display = "none";
      // 根据索引显示对应内容
      this.btns[index].className = "active";
      this.conts[index].style.display = "block";
      // 将本次索引设置为默认索引，以备下次清除使用
      this.index = index;
    }
    init(){
      // 根据默认索引（传参）设置默认显示的项
      this.btns[this.index].className = "active";
      this.conts[this.index].style.display = "block";
    }
  }

  new table({
    ele: document.querySelector(".table1"),
    index: 2
  })



  // 注意：
  // this的指向
  // 方法的执行顺序，而不是定义顺序
  


  
  
</script>
</html>